<template>
  <div class="asd">
    <!-- 背景视屏 -->
    <video src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4" loop="loop" muted="muted" autoplay class="videoss"></video>

    <!-- 登陆页面 -->
    <div class="neirong">
      <div class="imgs">
        <img src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png" alt="">
      </div>

      <!-- 输入框 -->
      <div>
        <el-form :model="loginFrom" :rules="rules" ref="loginFrom" class="demo-ruleForm">
          <el-form-item prop="account">
            <el-input type="username" v-model="loginFrom.account" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="loginFrom.password" placeholder="密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input v-model.number="loginFrom.code" placeholder="验证码"></el-input>
          </el-form-item>
          <img :src="imgUrl" alt="" width="150px">
          <el-form-item>
            <el-button type="primary" @click="submitForm" class="submit">登录</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 验证码 -->

    </div>
  </div>
</template>

<script>
import { loginMa, login } from '@/api/login'
export default {
  data() {
    return {
      loginFrom: {
        account: 'demo',
        // password: '888itcast.CN764%...',
        password: '888itcast.CN764%...',
        code: '',
        key: 'F8DB21F0FCAD035390D6EEAA1694012410159'
      },
      rules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      // 验证码
      imgUrl: ''
    }
  },
  created() {
    this.lodata()
  },
  methods: {
    // 点击登陆
    async submitForm() {
      await this.$refs.loginFrom.validate()
      const res = await login(this.loginFrom)
      console.log(res)
    },
    // 获取验证码
    async lodata() {
      const { request } = await loginMa(this.loginFrom.key)
      this.imgUrl = request.responseURL
      console.log(this.imgUrl)
    }
  }
}
</script>

<style scoped lang="scss">
.videoss {
  width: 100vw;
  height: 100vh;
  object-fit: fill;
}
.asd {
  overflow: hidden; // 不要滚动条
  width: 100vw;
  height: 100vh;
  .neirong {
    padding: 36px 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 370px;
    height: 418px;
    border-radius: 10px;
    background-color: #fff;
    img {
      width: 195px;
    }
  }
}
.imgs {
  margin: 0px 87px 30px 87px;
}
// .demo-ruleForm {
//    width: 100%;
//    background-color: pink;
// }
::v-deep .el-input__inner {
  height: 50px;
}
.submit {
  width: 100%;
  height: 55px;
  border: 0;
  font-weight: 700;
  font-size: 20px;
  background-color: #e15536;
}
</style>